<template>
	<div>
		<div class="list-item">
			<div class="coin-logo">
				<div class="icon icon-trx"></div>
			</div>
			<div class="coin-info td-item">
				<span class="coin-name">{{currency_name}}</span>
				<!--<span class="coin-price">￥0.178</span>-->
			</div>
			<div class="red-font td-item">
				<span>{{number}}</span>
				<!--<p class="coin-price coin-money">￥0</p>-->
			</div>
			<div class="gray-font td-item">
				<span>{{freeze_number}}</span>
				<!--<p class="coin-price coin-money">￥158.1</p>-->
			</div>
			<div class="gray-font td-item">
				<span>0</span>
				<!--&lt;!&ndash;<p class="coin-price coin-money">￥0</p>&ndash;&gt;-->
			</div>
			<div class="opr td-item "  >
				<span class="icon-more more-up" :id="id+1" v-if="showTRX" @click="changeTRX(id)"></span>
				<span class="icon-more more-down"  :id="id+1" v-else @click="changeTRX(id)" ></span>
			</div>
		</div>
		<div class="opr-list" v-if="showTRX" :id="id">
			<span class="opr-btn fix_w">刷新余额</span>
			<span class="opr-btn" @click="showWithdraws(id) ">提现</span>
			<span class="opr-btn" @click="showRecharges(id) ">充值</span>
			<span class="opr-btn" @click="changeRoute(id)">定存</span>
		</div>
	</div>

</template>
<script>
	"use strict";
	import $ from 'jquery';
	export default {
		name:"currency",
		props:["currency_img","currency_name","number","freeze_number","id"],
		data(){
			return{
				showTRX: false,
				showRecharge: false,
				showWithdraw: false,
				msg1:this.msg,
			}
		},
		computed:{
		},
		methods: {
			changeTRX(id) {
				let ids = id+1;
				$(".opr-list:not(#"+id+")").css('display','none');
				$(".icon-more:not(#"+ids+")").attr("class","icon-more more-down");
				this.showTRX = !this.showTRX;
			},
			changeRoute(id){
                this.$router.push({path:"/deposit?path=currency&id="+id});
			},
            showWithdraws(id){
			    alert(id)
            },
            showRecharges(id){
			    console.log(this.showRecharge)
                this.showRecharge = true
            }
		},
		mounted(){
			var th = this;
			setTimeout(function(){
				th.msg1 = "";
			},1400)
		},

		watch:{
			msg1(v,ov){
				this.$emit("toast",v);
			}
		}
	}
</script>
<style lang="scss">
	@import '../assets/sass/index.scss';
	.toastcover{
		@include position(top,left,6rem,50%);
		transform:translateX(-50%);
		animation:opcity-animation 1.5s ease-in-out 1;
	}
	.toast{
		display: table-cell;
		text-align: center;
		vertical-align: middle;
		height:count(30rem);
		padding-left:count(10rem);
		padding-right:count(10rem);
		border-radius: count(5rem);
		color:#fff;
		background:rgba(0,0,0,.6);
		font-size: 16px;
	}
</style>
